<template>
  <el-card>
    <!-- 步骤二： 调用组件 -->
      <v-charts :options='options' />
  </el-card>
</template>

<script>
// 步骤一：导入vue-echarts 组件
import VueEcharts from 'vue-echarts';
// 步骤三：按需导入 echarts 饼图需要的文件
import 'echarts/lib/chart/pie'
// 步骤三：导入标题需要的文件
import 'echarts/lib/component/title'
// 鼠标悬浮的文件
import 'echarts/lib/component/tooltip'
// 下载图片的文件 
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

// 引入从接口的数据
import getData from '../../request/charts'
export default {
// 注册vue-echarts 组件
  components:{
  //步骤一
  'v-charts':VueEcharts
  },
  data(){
    return {
      options:{
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: []
    },
    series: [
        {
            name: '月度销售总额',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: []
        }
    ]
}
    }
  },
  // 生命周期中调用该接口的数据，渲染
  created(){
    // then存放成功的方法
    getData().then(list=>{
      const xData=[]
      const yData=[]
      list.forEach(item=>{
        xData.push(item.month+'月')
        yData.push({value:item.total,name:item.month+'月'})
      });
      //更新数据
      // assign 方法在合并两个对象的时候新的对象会覆盖旧的对象
      this.options=Object.assign(this.options,{
        legend:{
          data:xData
        },
        series:{
          data:yData
        }
      })
    })
  }
}
</script>

<style>

</style>